<template>
  <div class="chat">
    <h1 class="user">用户: {{ currentUser.username }}</h1>
    <!-- 聊天列表 -->
    <div class="chatlist">
      <chatitem-com
        v-for="(item, index) in chatlist"
        :chatitem="item"
        :key="index"
      >
        {{ item.chatcontent }}
      </chatitem-com>
    </div>
    <chatinput-com :sendEvent="sendEvent"></chatinput-com>
  </div>
</template>

<script>
import chatinputCom from "./chatinputcom";
import chatitemCom from "./chatItem";
export default {
  data() {
    return {
      chatlist: [],
    };
  },
  props: ["currentUser"],
  components: {
    chatinputCom,
    chatitemCom,
  },
  methods: {
    sendEvent: function (value) {
      this.chatlist.push({
        user: {
          username: "小明",
          headerimg: require("../assets/img/1.jpg"),
        },
        chatcontent: value,
      });
      this.chatlist.push({
        user: this.$root.currentUser,
        chatcontent: new Date(),
      });
    },
  },
};
</script>

<style scoped>
.chat {
  width: 500px;
  height: 700px;
  border: 1px solid #ccc;
}
</style>
